layui表格刷新但不重新渲染的方法 解决刷新闪屏问题

您所在的位置:网站首页 layui 表格刷新表格宽度变化 layui表格刷新但不重新渲染的方法 解决刷新闪屏问题

layui表格刷新但不重新渲染的方法 解决刷新闪屏问题

2024-07-10 19:12| 来源: 网络整理| 查看: 265

解决layui表格刷新闪屏问题

按照官方文档,使用如下代码重新加载表格时,会出现页面闪动,以及表格位置会重置的问题。

1yourTable.reload();

目前,有如下可以实现刷新表格的同时,但不会对表格进行重新渲染的方法。你需要结合layui表格插件,以及layui分页插件。代码如下:

1234567let yourTable= table.render({ // 其他表格配置 page: { layout: ['prev', 'next', 'page', 'skip', 'count', 'limit', 'refresh'] } // 省略...});

使用上述代码后,会覆盖你的分页按钮配置,不过你可自由调整这些按钮的顺序,各个参数含义如下:

prev 上一页按钮next 下一页按钮page 页码按钮skip 输入页码跳转按钮count 总数据数量显示limit 每页显示数据限制选择refresh 刷新按钮(关键)

但是,仅有在用户点击了分页一栏中刷新按钮时,才会触发这种不会重新渲染表格的刷新方式。这肯定不能满足大部分开发者的需求,所以,我们可以通过jQuery调用该按钮的点击事件从而达到不渲染刷新的效果,代码如下:

1$(".layui-icon-refresh").click();

如果你想使代码更严谨,你可以在.layui-icon-refresh前面加上你表格的相关选择器。

现在,你就可以在该页面的任意地方调用这句代码,从而实现刷新layui表格,但是又不会使表格重新完全渲染了,也就不会发生表格闪动、重置等问题了。

layui表格定时刷新

你还可以利用上述代码,实现一个定时刷新的功能,并且也是不会发生闪屏、重置等问题的。具体实现代码如下:

1234567891011let ref = null;$("#toggleRefresh").click(function () { if (ref == null) { ref = setInterval(function () { $(".layui-icon-refresh").click(); }, 2000); } else { clearInterval(ref); ref = null; }});

上述代码使用了ES6特性let,早期版本浏览器(如IE6)不支持,可以自行修改。

现在,你可以创建一个ID为toggleRefresh的按钮来实现点击后定时刷新了。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3